<script setup lang="ts">
import { Position } from "@vue-flow/core"; // 导入 Position 类型
import { NodeToolbar } from "@vue-flow/node-toolbar";

// props 类型定义
const props = defineProps({
  id: String,
  data: {
    type: Object,
    required: true,
    default: () => ({
      toolbarVisible: false,
      toolbarPosition: "top" as Position,
      label: ""
    })
  }
});

// 发射事件
defineEmits(["toolbar-action"]);
const actions = ["添加", "删除"];
</script>

<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition as Position">
    <button v-for="action of actions" :key="action" type="button" @click="$emit('toolbar-action', action, props.id)">
      {{ action }}
    </button>
  </NodeToolbar>
  <div>
    <span class="node-label">
      {{ data.label }}
    </span>
  </div>
</template>

<style scoped>
.node-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-color-primary);
}
</style>
